@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Text("Collapsing Toolbar",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                      )),
                  background: Image.network(
                    "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                    fit: BoxFit.cover,
                  )),
            ),
          ];
        },
        body: Center(
          child: Text("Sample Text"),
        ),
      ),
    );

  

SliverAppBar For Login & Signup

  class CustomAppBarOne extends StatelessWidget {


@override
Widget build(BuildContext context) {
  return SliverAppBar(
    titleSpacing: 30,
    leading: MenuDrawerPersonal(),
    title: Row(
      children: [
        Expanded(
          child: Container(
            height: 200,
            decoration: const BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/images/logo/logo.png'),
                    fit: BoxFit.fitWidth)),
          ),
        )
      ],
    ),
    actions: [
        Padding(
          padding: const EdgeInsets.only(top: 5, bottom: 5, right: 10),
          child: Row(
            children: [
              TextButton(
                onPressed: () {   },
                child: const Text(
                  "Log in",
                ),
              ),
              const SizedBox(width: 4),
              InkWell(
                onTap: () {},
                child: Container(
                  height: 70,
                  width: 100,
                  decoration: BoxDecoration(
                    color: AppColors.lightBlueColor,
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: const Center(
                    child: Text(
                      "Sign up",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              )
            ],
          ),
        )
    ],
    elevation: 0.0,
    backgroundColor: Colors.white,
    pinned: true,
    bottom: PreferredSize(
      // Add this code
      preferredSize: const Size.fromHeight(-8), // Add this code
      child: Container(), // Add this code
    ),
  );
}
}

SliverAppBar For Find Local Text and Image

class CustomAppBarTwo extends StatelessWidget {
  const CustomAppBarTwo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      leading: Container(),
      title: Container(),
      backgroundColor: Colors.white,
      expandedHeight: 250,
      floating: false,
      elevation: 0,
      flexibleSpace: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
        return FlexibleSpaceBar(
            collapseMode: CollapseMode.parallax,
            background: Container(
                color: Colors.white,
                child: Column(children: [
                  Padding(
                    padding: const EdgeInsets.all(8),
                    child: Row(
                      children: [
                        Expanded(
                          flex: 1,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Padding(
                                padding: EdgeInsets.only(left: 15),
                                child: Row(
                                  children: [
                                    Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        const Text(
                                          "Find Local",
                                        ),
                                        const Text(
                                          "Professional For",
                                        ),
                                        const Text(
                                          "Pretty Much Anything",
                                        ),
                                        SizedBox(
                                          height: 20,
                                        ),
                                      
                      ],
                    ),
                  ),
                ])));
      }),
    );
  }
}

for search TextField And Button

class CustomAppBarThree extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverAppBar(
      leading: Container(),
      elevation: 10,
      bottom: PreferredSize(
        // Add this code
        preferredSize: Size.fromHeight(-20), // Add this code
        child: Text(''), // Add this code
      ),
      backgroundColor: Colors.white,
      pinned: true,
      flexibleSpace: Padding(
          padding: const EdgeInsets.symmetric(
            horizontal: 10.0,
          ),
          child: FlexibleSpaceBar(
            background: Stack(
              clipBehavior: Clip.none,
              children: [
                Padding(
                  padding: EdgeInsets.only(top: 15),
                  child: Row(
                    children: [
                      Expanded(
                          child: Container(
                        padding: EdgeInsets.only(left: 20),
                        height: 70,
                        width: Get.width,
                        decoration: BoxDecoration(
                          color: AppColors.buttonGreyColor,
                          borderRadius: const BorderRadius.only(
                              topLeft: Radius.circular(6),
                              bottomLeft: Radius.circular(6)),
                        ),
                        child: TextFormField(
                          decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: "What's on  your to-do list",
                              hintStyle: labelTextStyle,
                              ),
                        ),
                      )),
                    Container(
                        width: 50,
                        height: 60,
                    decoration: BoxDecoration(
                      color: AppColors.lightBlueColor,
                         borderRadius: borderRadius),
                          child: MaterialButton(
                          onPressed: () {},
                          child: FittedBox(
                          child: Center(
                          child: Text(
                              "Search",
                                style: TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.w400,
                          fontFamily: 'poppins',
                          fontSize: 16,
                        ),
            ),
          ),
        ),
      ),
    ),
                        borderRadius: const BorderRadius.only(
                            topRight: Radius.circular(5),
                            bottomRight: Radius.circular(5)),
                        onTap: () {},
                      ),
                    ],
                  ),
                ),
              ],
            ),
          )),
    );
  }
}

Now it’s time to combine our code

NestedScrollView(
              headerSliverBuilder:
                  (BuildContext context, bool innerBoxScrolled) {
                return <Widget>[
                  CustomAppBarOne(),
                  CustomAppBarTwo(),
                  CustomAppBarThree(),
                ];
              },
              body: Center(
                  child : Text("Hello Sliver AppBar"),
                      ),
            );
          })),

        

For example, you may run into a situation where you need to show an AppBar containing a search box inside the SliverAppBar.

                Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        ...
        bottom: AppBar(
          title: Container(
            height: 45,
            child: TextField(
              decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'Enter a search term'),
            ),
          ),
        ),
      ),
      SliverGrid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: 2,
        ),
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return ItemTile(index);
          },
        ),
      ),
    ],
  ),
)

                Scaffold(
  body: DefaultTabController(
    length: 3,
    child: NestedScrollView(
      headerSliverBuilder:
          (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            pinned: false,
            expandedHeight: 250.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Goa', textScaleFactor: 1),
              background: Image.asset(
                'assets/images/beach.png',
                fit: BoxFit.fill,
              ),
              stretchModes: [StretchMode.zoomBackground],
            ),
            //collapsedHeight: 100,
          ),
          SliverPersistentHeader(
            delegate: MySliverPersistentHeaderDelegate(
              TabBar(
                tabs: [
                  Tab(icon: Icon(Icons.flight)),
                  Tab(icon: Icon(Icons.directions_transit)),
                  Tab(icon: Icon(Icons.directions_car)),
                ],
              ),
            ),
            pinned: false,
          ),
        ];
      },
      body: TabBarView(
        children: [
          Icon(Icons.flight, size: 350),
          Icon(Icons.directions_transit, size: 350),
          Icon(Icons.directions_car, size: 350),
        ],
      ),
    ),
  ),
)

Pinning the TabBar

SliverPersistentHeader(
  delegate: MySliverPersistentHeaderDelegate(
    TabBar(
      tabs: [
        ...
      ],
    ),
  ),
  pinned: true,
)